<template>
	<!-- 状态栏占位空间 -->
	<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

	<view class="custom-navbar" :style="navbarStyle">

		<!-- 导航栏内容 -->
		<view class="navbar-content" :style="contentStyle">
			<!-- 左侧返回按钮 -->
			<view v-if="left == 'back'" class="navbar-left" @click="goBack">
				<view class="left-button" :style="{ color: '#333333', titleStyle }">
					<!-- <u-icon name="arrow-left" size="48" :custom-style="{ color: '#777' }"></u-icon> -->
					<uni-icons type="left" size="24" :color="titleStyle.color ? titleStyle.color : '#333'"></uni-icons>
				</view>
			</view>

			<view v-else-if="left == 'url'" class="navbar-left" @click="goBackUrl">
				<uni-icons type="left" size="24" :color="titleStyle.color ? titleStyle.color : '#333'"></uni-icons>
			</view>

			<view v-else-if="left == 'logo'" class="navbar-left">
				<image src="/static/svg/logo2.svg" mode="widthFix" style="width: 30px"></image>
			</view>

			<view v-else-if="left == 'none'" class="navbar-left"></view>

			<view v-else class="navbar-left" @click="close">
				<view class="left-button" :style="{ color: '#333333', titleStyle }">
					<!-- <u-icon name="arrow-left" size="48" :custom-style="{ color: '#777' }"></u-icon> -->
					<uni-icons type="left" size="24" :color="titleStyle.color ? titleStyle.color : '#333'"></uni-icons>
				</view>
			</view>

			<!-- 中间标题区域 -->
			<view class="navbar-title" :style="titlePositionStyle">
				<text class="title-text" :style="titleStyle">{{ title }}</text>
			</view>

			<!-- 右侧区域 -->
			<view class="navbar-right" @click="handleRightClick">
				<block v-if="type === 'add'">
					<!-- <u-icon name="plus" size="48" :custom-style="{ color: '#777', marginRight: '36rpx' }"></u-icon> -->
					<uni-icons type="plusempty" size="40"
						:custom-style="{ color: '#777', marginRight: '36rpx' }"></uni-icons>
				</block>
				<block v-else-if="type === 'search'">
					<!-- <u-icon name="search" size="48" :custom-style="{ color: '#777' }"></u-icon> -->
					<uni-icons type="search" size="48" :custom-style="{ color: '#777' }"></uni-icons>
				</block>
				<block v-else-if="type === 'more'">
					<!-- <u-icon name="more-dot-fill" size="48" :custom-style="{ color: '#777' }"></u-icon> -->
					<uni-icons type="more-filled" size="48" :custom-style="{ color: '#777' }"></uni-icons>
				</block>
				<block v-else-if="type === 'text' && rightText">
					<text class="right-text" :style="{
						color: rightText.color || '#333333',
						fontWeight: rightText.fontWeight || 'normal',
						fontSize: rightText.fontSize || '32rpx'
					}">{{ rightText.title }}</text>
				</block>
				<view v-else class="placeholder"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CustomNavbar',
	props: {
		// 标题文本
		title: {
			type: String,
			default: ''
		},
		// 标题样式
		titleStyle: {
			type: Object,
			default: () => ({
				color: '#000000'
			})
		},
		// 是否显示返回按钮（false则显示关闭按钮）
		left: {
			type: String,
			default: 'back'
		},
		// 返回按钮的url
		backUrl: {
			type: String,
			default: ''
		},
		// 右侧图标类型：add, search, more, text
		type: {
			type: String,
			default: ''
		},
		// 右侧文字配置
		rightText: {
			type: Object,
			default: () => ({
				title: '',
				color: '#333333',
				fontWeight: 'normal',
				fontSize: '32rpx'
			})
		},
		// 背景颜色
		backgroundColor: {
			type: String,
			default: '#f8f8f8'
		},
		// 是否使用自定义导航栏高度
		useCustomHeight: {
			type: Boolean,
			default: false
		},
		// 自定义导航栏高度
		customHeight: {
			type: Number,
			default: 44 // 这个值可以作为未使用useCustomHeight时的基准之一
		},
		// 主页路径 (之前版本存在，保持)
		homePage: {
			type: String,
			default: '/pages/index/index' // 请根据您的项目实际首页路径修改
		},
		// 指定返回页面层级 (之前版本存在，保持)
		delta: {
			type: Number,
			default: 1
		}
	},
	data() {
		return {
			systemInfo: null, // 新增：存储系统信息
			statusBarHeight: 0,
			navbarHeight: 44, // 默认导航栏内容高度 (不含状态栏)
			safeAreaInsets: {
				top: 0, // 通常指状态栏高度，刘海屏会更大
				right: 0, // 右侧安全区域到屏幕边缘的距离
				bottom: 0, // 底部安全区域到屏幕边缘的距离
				left: 0 // 左侧安全区域到屏幕边缘的距离
			},
			platform: '',
			isIphoneX: false, // 保留，可能在其他地方用到
			menuButtonInfo: null // 新增：存储小程序胶囊按钮信息
		}
	},
	computed: {
		// 导航栏整体样式
		navbarStyle() {
			// safeAreaInsets.top 通常已包含状态栏高度
			// 对于刘海屏等，safeAreaInsets.top 会大于 statusBarHeight
			// 如果期望导航栏紧贴状态栏下方，并且状态栏区域由父组件或页面处理，则 paddingTop 可以设为0
			// 但通常自定义导航栏会自己处理状态栏区域，所以 paddingTop: this.statusBarHeight + 'px' 也是一种常见做法
			// 这里我们让导航栏从屏幕顶部开始，内容区再通过 statusBarHeight 占位
			return {
				backgroundColor: this.backgroundColor,
				// paddingTop: this.statusBarHeight + 'px', // 状态栏区域由 status-bar view 处理
				// zIndex: 999 // 确保导航栏在最上层
			}
		},
		// 内容区样式
		contentStyle() {
			let heightVal = this.useCustomHeight ? this.customHeight : this.navbarHeight;
			// 默认使用safeAreaInsets.left计算左边距，并保证最小16px (uni.upx2px(32) / 2)
			// let paddingLeftVal = Math.max(this.safeAreaInsets.left, uni.upx2px(32) / 2);
			// 默认使用safeAreaInsets.right计算右边距，并保证最小16px
			// let paddingRightVal = Math.max(this.safeAreaInsets.right, uni.upx2px(32) / 2);

			// 初始 padding 直接使用 safeAreaInsets 的值
			let paddingLeftVal = this.safeAreaInsets.left;
			let paddingRightVal = this.safeAreaInsets.right;

			// #ifdef MP-WEIXIN
			if (this.menuButtonInfo && this.systemInfo) { // 确保胶囊信息和系统信息已获取
				// 如果用户没有自定义高度，则根据胶囊按钮动态调整内容区高度
				if (!this.useCustomHeight) {
					// 胶囊按钮顶部到状态栏顶部的距离 - 状态栏高度 = 胶囊按钮顶部到状态栏底部的距离
					const menuButtonTopGap = this.menuButtonInfo.top - this.statusBarHeight;
					// 导航栏内容区域的高度 = 胶囊高度 + 上下两倍的间隙（使得胶囊在内容区垂直居中）
					heightVal = this.menuButtonInfo.height + menuButtonTopGap * 2;
					heightVal = Math.max(heightVal, 32); // 保证最小内容高度32px
				}
				// 动态调整右侧padding以避开胶囊按钮
				// 右侧 padding = 屏幕宽度 - 胶囊左边界 + 按钮和屏幕边缘之间期望的最小间隙 (e.g., 8px)
				// 这里直接使用屏幕宽度 - 胶囊按钮右侧坐标 作为可用的右侧空间，然后减去胶囊按钮的宽度，再减去一个期望的右侧元素与胶囊间的间隙
				// 更简单：右侧内边距 = 屏幕宽度 - 胶囊按钮左侧边界 + 胶囊按钮与右侧图标的间距
				// paddingRightVal = (this.systemInfo.screenWidth - this.menuButtonInfo.left) + uni.upx2px(16); // 在胶囊左侧留出空间
				// 应该是：屏幕宽度 - 胶囊按钮的右侧坐标 + 期望的右侧元素与屏幕边缘的间距
				// 或者：(屏幕宽度 - 胶囊按钮.right) + (胶囊按钮.right - 胶囊按钮.left) = 屏幕宽度 - 胶囊按钮.left
				// 新的计算方式: 右边距 = (屏幕宽度 - 胶囊按钮右侧位置) + 胶囊按钮与右侧图标的间隙 (例如8px)
				//  paddingRightVal = (this.systemInfo.screenWidth - this.menuButtonInfo.right) + uni.upx2px(16);
				//  以上计算不正确，应该是：右侧元素区域的起始位置必须在胶囊按钮的左边
				//  所以右侧的 padding 应该是从屏幕右边到胶囊按钮左边的距离
				paddingRightVal = (this.systemInfo.screenWidth - this.menuButtonInfo.left) + uni.upx2px(16); // 在胶囊左侧多留16rpx的间隙
			}
			// #endif

			return {
				height: heightVal + 'px',
				paddingLeft: paddingLeftVal + 'px',
				paddingRight: paddingRightVal + 'px'
			}
		},
		// 标题样式
		titlePositionStyle() {
			return {
				textAlign: 'center'
			}
		}
	},
	created() {
		this.initSystemInfo();
	},
	methods: {
		// 初始化系统信息
		initSystemInfo() {
			try {
				const systemInfo = uni.getSystemInfoSync();
				this.systemInfo = systemInfo; // 保存系统信息

				this.statusBarHeight = systemInfo.statusBarHeight || 0;
				this.platform = systemInfo.platform;

				// 设置导航栏内容默认高度 (不含状态栏)
				// this.navbarHeight 在小程序中可能会被 menuButtonInfo 动态调整
				if (!this.useCustomHeight) { // 仅在未使用自定义高度时设置平台默认值
					if (systemInfo.platform === 'ios') {
						this.navbarHeight = 44;
					} else if (systemInfo.platform === 'android') {
						this.navbarHeight = 48;
					} else { // H5等其他平台
						this.navbarHeight = 44;
					}
				}


				// 获取安全区域
				if (systemInfo.safeArea) {
					this.safeAreaInsets = {
						top: systemInfo.safeArea.top, // safeArea.top 通常包含了状态栏的高度
						right: systemInfo.screenWidth - systemInfo.safeArea.right,
						bottom: systemInfo.screenHeight - systemInfo.safeArea.bottom,
						left: systemInfo.safeArea.left
					};
				} else {
					// 对于获取不到safeArea的旧设备或特殊情况，进行回退
					// 状态栏高度作为顶部安全距离
					this.safeAreaInsets = { top: this.statusBarHeight, right: 0, bottom: 0, left: 0 };
				}

				// #ifdef MP-WEIXIN
				try {
					const menuButton = uni.getMenuButtonBoundingClientRect();
					if (menuButton && menuButton.width > 0 && menuButton.height > 0 && menuButton.top > 0) {
						this.menuButtonInfo = menuButton;
						// 如果用户没有自定义高度，我们可以在这里根据胶囊按钮调整navbarHeight的默认值
						// if (!this.useCustomHeight) {
						//     const menuButtonTopGap = menuButton.top - this.statusBarHeight;
						//     this.navbarHeight = menuButton.height + menuButtonTopGap * 2;
						//     this.navbarHeight = Math.max(this.navbarHeight, 32); // 保证最小高度
						// }
					} else {
						this.setFallbackMenuButtonInfo(systemInfo);
					}
				} catch (e) {
					console.error('获取小程序胶囊按钮信息失败:', e);
					this.setFallbackMenuButtonInfo(systemInfo);
				}
				// #endif

				this.isIphoneX = this.checkIsIphoneX(systemInfo); // 保留此判断

			} catch (e) {
				console.error('获取系统信息失败:', e);
				// 基础回退值
				this.statusBarHeight = 20;
				this.navbarHeight = this.useCustomHeight ? this.customHeight : 44;
				if (!this.safeAreaInsets || (this.safeAreaInsets.top === 0 && this.statusBarHeight > 0)) {
					this.safeAreaInsets = { top: this.statusBarHeight, right: 0, bottom: 0, left: 0 };
				}
				// #ifdef MP-WEIXIN
				this.setFallbackMenuButtonInfo(this.systemInfo || { screenWidth: 375, statusBarHeight: this.statusBarHeight }); // 尝试使用已有的systemInfo或更通用的回退
				// #endif
			}
		},

		setFallbackMenuButtonInfo(systemInfo) {
			// 如果获取失败或数据无效，提供一个基于状态栏的估算回退值
			const defaultGap = uni.upx2px(8); // 估算胶囊上下间隙
			const fallbackTop = (systemInfo.statusBarHeight || 20) + defaultGap;
			const fallbackHeight = 32; // 常见高度
			const fallbackWidth = 87; // 常见宽度
			const fallbackRightMargin = uni.upx2px(20); // 估算胶囊右侧与屏幕边缘距离

			this.menuButtonInfo = {
				width: fallbackWidth,
				height: fallbackHeight,
				top: fallbackTop,
				left: (systemInfo.screenWidth || 375) - fallbackWidth - fallbackRightMargin,
				right: (systemInfo.screenWidth || 375) - fallbackRightMargin,
				bottom: fallbackTop + fallbackHeight
			};
		},

		// 检查是否为iPhone X 系列 (这个方法可以保留，如果isIphoneX有其他用途)
		checkIsIphoneX(systemInfo) {
			const { model, platform, screenHeight, safeArea } = systemInfo;
			const iphoneXSeries = [
				'iPhone X', 'iPhone XR', 'iPhone XS', 'iPhone XS Max',
				'iPhone 11', 'iPhone 11 Pro', 'iPhone 11 Pro Max',
				'iPhone 12', 'iPhone 12 mini', 'iPhone 12 Pro', 'iPhone 12 Pro Max',
				'iPhone 13', 'iPhone 13 mini', 'iPhone 13 Pro', 'iPhone 13 Pro Max',
				'iPhone 14', 'iPhone 14 Plus', 'iPhone 14 Pro', 'iPhone 14 Pro Max',
				'iPhone 15', 'iPhone 15 Plus', 'iPhone 15 Pro', 'iPhone 15 Pro Max'
			];

			// 更可靠的方式是检查safeArea和statusBarHeight的差异，或者屏幕的特殊比例
			let isX = false;
			if (platform === 'ios') {
				isX = iphoneXSeries.some(item => model && model.includes(item));
				if (!isX && safeArea) {
					// 对于某些无法通过model判断的iOS设备（如模拟器或未来新机型），可以通过safeArea判断
					// 刘海屏通常statusBarHeight会比较大（如44px, 47px, 50px, 54px等），且safeArea.top会等于statusBarHeight
					// 底部安全区 safeArea.bottom < screenHeight
					if (safeArea.bottom < screenHeight && safeArea.top > 20) { // 20是一般非刘海屏的状态栏高度
						isX = true;
					}
				}
			}
			return isX;
		},

		// 返回上一页
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > this.delta) { // 确保可以返回指定的层数
				uni.navigateBack({
					delta: this.delta,
					fail: () => { // 如果navigateBack失败（比如delta过大），尝试返回首页
						this.navigateToHome();
					}
				});
			} else if (pages.length > 1 && this.delta > pages.length - 1) { // delta 大于可返回层级，但仍可返回
				uni.navigateBack({
					delta: pages.length - 1 || 1
				});
			}
			else { // 无法返回，或只剩一页
				this.navigateToHome();
			}
		},

		// 返回按钮的url
		goBackUrl() {
			if (this.backUrl === '/pages/index/index' || this.backUrl === '/pages/index/index') {
				uni.switchTab({
					url: this.backUrl,
					success: () => {
					},
					fail: (err) => {
						uni.reLaunch({
							url: this.backUrl
						});
					}
				});
			} else {
				uni.reLaunch({
					url: this.backUrl,
				});
			}
		},

		// 返回首页
		navigateToHome() {
			// 尝试获取 manifest.json 中配置的 tabBar 页面列表
			const tabBarList = [];
			// @ts-ignore
			if (process.env.UNI_PLATFORM === 'app-plus' || process.env.UNI_PLATFORM === 'mp-weixin') {
				const manifest = uni.getAppBaseInfo ? uni.getAppBaseInfo().host : null; // 尝试获取应用基本信息中的manifest
				// manifest的tabBar解析比较复杂，uni-app内部处理，这里简化
				// 通常tabBar页面是固定的，可以硬编码或通过其他方式获取
			}
			// 简化处理：如果homePage是tabBar页面，则用switchTab
			// 此处需要开发者根据项目实际的tabBar配置来判断
			// 假设 this.homePage 如果是tabBar页面，开发者会正确配置
			// uni.canIUse('switchTab')
			const pages = getCurrentPages();
			const currentPath = pages.length ? `/${pages[pages.length - 1].route}` : '';

			// 简单的判断首页是否为tabBar页面（实际项目中应该有更可靠的判断方式）
			// 例如，在app.vue中全局存储tabBar路径列表
			const isHomePageTabBar = this.homePage === '/pages/index/index'; // 假设这是你的tabBar首页

			if (isHomePageTabBar && currentPath !== this.homePage) {
				uni.switchTab({
					url: this.homePage,
					fail: (err) => {
						console.error('switchTab to homePage failed:', err);
						uni.reLaunch({ url: this.homePage });
					}
				});
			} else {
				uni.reLaunch({
					url: this.homePage,
					fail: (err) => {
						console.error('reLaunch to homePage failed:', err);
						// 可以尝试返回上一页作为最后的手段，如果已经是首页会无效
						if (pages.length > 1) uni.navigateBack({ delta: 1 });
					}
				});
			}
		},


		// 处理右侧点击
		handleRightClick() {
			this.$emit('rightClick', this.type); // 保留原有逻辑
		},

		// 关闭当前页面 (新增或恢复的方法)
		close() {
			this.$emit('close'); // 触发自定义关闭事件
			// 如果父组件没有监听close事件，则执行默认的返回操作
			// Vue2中 this._events.close, Vue3中 this.$.vnode.props.onClose
			const listeners = this.$listeners || (this.$ && this.$.vnode && this.$.vnode.props);
			if (!listeners || !listeners.close) {
				this.goBack(); // 使用已优化的goBack
			}
		}
	}
}
</script>

<style lang="scss">
.custom-navbar {
	// position: fixed;
	// top: 0;
	// left: 0;
	// right: 0;
	box-sizing: border-box;
	background-color: $card-background; // 使用主题变量代替#FFFFFF
	z-index: 2;
	height: 100rpx;
	// padding: 20rpx 10rpx;

	.status-bar {
		width: 100vw;
		background-color: $primary-color; // 使用主题变量代替#FFFFFF
	}

	.navbar-content {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height 和 padding 通过 style 绑定

		.navbar-left {
			// position: absolute; // 如果标题要绝对居中，左右两边也需要绝对定位或flex item
			// left: 0;
			// top: 0;
			// bottom: 0;
			min-width: 100rpx; // 保证最小宽度
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 16rpx; // 移到contentStyle的paddingLeftVal

			.left-button {
				// 增加一个内部button，方便控制点击区域和样式
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 72rpx; // u-icon size 48rpx, 外层再大一些
				height: 72rpx;
				// color 通过 prop 或 :style 设置
			}
		}

		.navbar-title {
			position: absolute; // 使标题绝对居中，不影响左右元素布局
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			// width: 60%; // 限制宽度，防止过长标题影响布局 (可以动态计算)
			// max-width: calc(100% - 200rpx - 64rpx); // 减去左右最小宽度和padding
			height: 100%; // 确保和navbar-content一样高，便于垂直居中
			display: flex;
			align-items: center;
			justify-content: center;

			.title-text {
				font-size: 40rpx; // 默认字体大小
				font-weight: 400; // 默认字重
				color: $text-color-light; // 使用主题变量
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 400rpx; // 给一个最大宽度防止标题过长破坏布局
			}
		}

		.navbar-right {
			// position: absolute;
			// right: 0;
			// top: 0;
			// bottom: 0;
			min-width: 100rpx; // 保证最小宽度
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end; // 内容靠右
			// padding-right: 16rpx; // 移到contentStyle的paddingRightVal

			.right-text {
				padding: 0 16rpx; // 给文字按钮一些内边距
				// 字体样式通过 :style 绑定
			}

			.placeholder {
				// 如果右侧没有内容，用一个占位符保持结构
				width: 72rpx; // 和左侧按钮区域大致对齐
				height: 72rpx;
			}
		}
	}
}

/* 适配 H5，H5下通常用sticky效果更好，如果希望固定在顶部则用fixed */
/* #ifdef H5 */
.custom-navbar {
	position: sticky; // H5环境下，sticky通常表现更好，随页面滚动到顶部后固定
}

/* #endif */
</style>
